<div class="usermsg">
    <div>
        <div><b>用户名</b></div>
        <div class="user_msg username"></div>
    </div>
    <div>
        <div><b>姓 名</b></div>
        <div class="user_msg realname"></div>
    </div>
    <div>
        <div><b>手机号</b></div>
        <div class="user_msg telephone"></div>
    </div>
    <div>
        <div><b>性 别</b></div>
        <div class="user_msg gender"></div>
    </div>
    <div>
        <div><b>出生年月</b></div>
        <div class="user_msg birth"></div>
    </div>
    <div>
        <div><b>注册时间</b></div>
        <div class="user_msg registerTime"></div>
    </div>
    <div>
        <div><b>状 态</b></div>
        <div class="user_msg status"></div>
    </div>
</div>

<!-- 新增修改的模态框Modal -->
<div class="modal fade" id="MymsgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
            </div>
            <div class="modal-body">
                <div class="dialog-center">
                    <div>
                        用户名:
                        <input class="form-control" type="text" name="username" id="disabledInput" disabled>
                    </div>
                    <div>
                        密码:
                        <input class="form-control" type="text" name="password">
                    </div>
                    <div>
                        姓名:
                        <input class="form-control" type="text" name="realname">
                    </div>
                    <div>
                        状态:
                        <input class="form-control" type="text" name="status">
                    </div>
                    <div>
                        电话:
                        <input class="form-control" type="text" name="telephone">
                    </div>
                    <div class="radio-inline">
                        性别:
                    </div>
                    <div class="radio-inline">
                        <input type="radio" name="gender" value="male" checked="true">男
                    </div>
                    <div class="radio-inline">
                        <input type="radio" name="gender" value="female">女
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                <button type="button" class="btn btn-primary" id="mymsg_submit">提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    // 接收id并消除
    var id = sessionStorage.getItem('userid');
    window.sessionStorage.removeItem('userid');
    //封装
    function getuserMsg() {
        $.get(baseURL + '/baseUser/cascadeRoleFindAll', function(res) {
            // console.log(res);
            // ('.user_msg').empty();
            // 遍历数据
            res.data.forEach(function(item, index) {
                // 匹配用户id并插入
                if (item.id == id) {
                    // 获取当前用户的信息
                    $('.username').append(item.username)
                    $('.realname').append(item.realname)
                    $('.telephone').append(item.telephone)
                    $('.gender').append(item.gender === 'male' ? '男' : '女')
                    $('.birth').append(new Date(item.birth).toLocaleDateString())
                    $('.registerTime').append(new Date(item.registerTime).toLocaleString())
                    $('.status').append(item.status)
                    btn = (`<button data-item='${JSON.stringify(item)}' id="user_update" class="btn btn-primary" data-toggle="modal" data-target="#MymsgModal">修改</button>`)
                    $('.usermsg').append(btn)
                }
            })
        })
    }
    getuserMsg();

    //修改功能事件代理 id="user_update"
    $('.usermsg').on('click', '#user_update', function() {
        user = $(this).attr('data-item');
        user = JSON.parse(user);
        // console.log(user);
        $('input[name=username]').val(user.username);
        $('input[name=password]').val(user.password);
        $('input[name=realname]').val(user.realname);
        $('input[name=telephone]').val(user.telephone);
        $('input[name=status]').val(user.status);
        $('input[name=gender][value=' + user.gender + ']').prop('checked', true);
        //设置模态框标题
        $('.modal-title').html('修改用户信息')
    });

    //新增修改提交按钮  修改:更新数据   传id代表修改
    $("#mymsg_submit").click(function() {
        //获取用户输入的信息
        var username = $('input[name=username]').val();
        var password = $('input[name=password]').val();
        var realname = $('input[name=realname]').val();
        var telephone = $('input[name=telephone]').val();
        var status = $('input[name=status]').val();
        var gender = $('input[name=gender]:checked').val();
        // console.log(id, username, password, realname, telephone, gender);
        //访问后台接口,保存到数据库,保存成功之后刷新数据
        $.post(baseURL + '/baseUser/saveOrUpdate', {
            id: id,
            username: username,
            password: password,
            realname: realname,
            telephone: telephone,
            status: status,
            gender: gender
        }, function(res) {
            console.log(res);
            //提示保存成功
            if (res.status == 200) {
                // getuserMsg();
                $('.container-left li').eq(1).trigger('click');
                alert('保存成功');
            }
        });
        $("#MymsgModal").modal("hide")
        $('.modal-backdrop').remove(); //去掉遮罩层
    })
</script>

<style>
    * {
        line-height: 32px;
    }
    
    .usermsg>div>div {
        display: inline-block;
    }
</style>